<template>
  <div>
    <!-- 头部 --start-->
    <div class="nav">
      <p>
        <span>.</span>
        订单详情
      </p>

      <div id="nav_go5">
        <el-button type="info" icon="el-icon-back" class="btn_fanhui" @click="revert()">返回</el-button>
      </div>
    </div>
    <!-- 头部 --end-->

    <!-- 合同信息 --start-->
    <div class="conter_box1">
      <p>
        <em>1</em> 合同信息
      </p>
      <ul>
        <li>
          <span>订单编号</span>
          <el-input v-model="orderno" style="width:70%" readonly></el-input>
        </li>
        <li>
          <span>订单类型</span>
          <el-input v-model="ordtype" style="width:70%" readonly></el-input>
        </li>
        <li>
          <span>企业名称</span>
          <el-input v-model="compony" style="width:70%" readonly></el-input>
        </li>

        <li>
          <span>接单日期</span>
          <el-input v-model="getorderdate" style="width:70%" readonly></el-input>
        </li>
        <li>
          <span>交货日期</span>
          <el-input v-model="deliverydate" style="width:70%" readonly></el-input>
        </li>
        <li>
          <span>签单人员</span>
          <el-input v-model="writer" style="width:70%" readonly></el-input>
        </li>
      </ul>
    </div>
    <!-- 合同信息 --end-->

    <!-- 产品信息 --start-->
    <div class="conter_box3">
      <p>
        <em>2</em> 产品信息
      </p>
      <template>
        <el-table :data="tableData" style="width: 100%" height="110px">
          <el-table-column type="index" label="序号" align="center"></el-table-column>
          <el-table-column label="产品代码" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.procode" readonly></el-input>
            </template>
          </el-table-column>
          <el-table-column label="产品名称" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.proname" readonly></el-input>
            </template>
          </el-table-column>
          <el-table-column label="单位" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.unit" readonly></el-input>
            </template>
          </el-table-column>
          <el-table-column label="数量" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.number" readonly></el-input>
            </template>
          </el-table-column>
          <el-table-column label="交期" align="center" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.deliverydate" readonly></el-input>
            </template>
          </el-table-column>
          <el-table-column label="产品类型" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.protype" readonly></el-input>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark" readonly></el-input>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- 产品信息 --end-->

    <!-- 付款信息 --start-->
    <div class="conter_box4">
      <p>
        <em>3</em> 付款信息
      </p>
      <ul>
        <li>
          <span>合同金额</span>
          <el-input v-model="hetongmoney" style="width:70%" readonly>
            <template slot="append">元</template>
          </el-input>
        </li>
        <li>
          <span>付款方式</span>
          <el-input v-model="paystyle" style="width:70%" readonly></el-input>
        </li>
        <li>
          <span>支付方式</span>
          <el-input v-model="payforstyle " style="width:70%" readonly></el-input>
        </li>
      </ul>
    </div>
    <!-- 付款信息 --end-->

    <!-- 附件上传 --start-->
    <div id="conter_box5">
      <p>
        <em>4</em> 合同上传
      </p>
      <ul>
        <li>
          <el-upload
            class="avatar-uploader"
            action="/apis/PublicAPI.asmx/UpImg"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrls" :src="imageUrls" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <span>订单导入</span>
        </li>
        <li>
          <el-upload
            class="avatar-uploader"
            action="/apis/PublicAPI.asmx/UpImg"
            :show-file-list="false"
            :on-success="handleAvatarSuccess1"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrls1" :src="imageUrls1" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <span>图纸导入</span>
        </li>
        <li>
          <el-upload
            class="avatar-uploader"
            action="/apis/PublicAPI.asmx/UpImg"
            :show-file-list="false"
            :on-success="handleAvatarSuccess2"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrls2" :src="imageUrls2" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <span>其他导入</span>
        </li>
      </ul>
    </div>
    <!-- 附件上传 --end-->

    <!-- 底部按钮 --start-->
    <div class="bottom">
      <p>
        制表人员
        <el-input style="width:70%" v-model="makeman" readonly></el-input>
      </p>
      <el-button type="primary" size="medium" @click="revert()">确定</el-button>
      <el-button type="info" size="medium" @click="revert()">返回</el-button>
    </div>
    <!-- 底部按钮 --end-->
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      configuration: false,
      hideUpload: false,
      hideUpload2: false,
      hideUpload3: false,

      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,

      dialogImageUrl2: "",
      dialogVisible2: false,
      disabled2: false,

      dialogImageUrl3: "",
      dialogVisible3: false,
      disabled3: false,

      active: 0,
      state1: "",
      state2: "",
      dialogVisible: false,
      tableData: [{}],
      tableData1: [{}],
      tableData2: [{}],
      tableData3: [{}],
      //合同信息
      orderno: "",
      ordtype: "",
      compony: "",
      getorderdate: "",
      deliverydate: "",
      writer: "",

      //付款信息
      hetongmoney: "", //订单金额
      paystyle: "", //付款方式
      payforstyle: "", //支付方式
      makeman: "",
      e: ""
    };
  },
  created() {
    this.e = this.$route.query.orderno;
    this.xq();
  },
  methods: {
    //详情
    xq() {
      let arr = { orderno: this.e };
      let arr1 = JSON.stringify(arr);
      axios("apis/SalesManagement.asmx/OrdmanPK?index=2&jsondata=" + arr1).then(
        ({ data }) => {
          let data1 = this.$x2js.xml2js(data);
          let data3 = JSON.parse(data1.string.__text);
          console.log(data3);
          this.orderno = data3.orderno;
          this.compony = data3.compony;
          for (var i = 0; i < 1; i++) {
            var dd = new Date(parseInt(data3.getorderdate.substr(6, 13)));
            var y = dd.getFullYear();
            var m = dd.getMonth() + 1;
            m = m < 10 ? "0" + m : m;
            var d = dd.getDate();
            d = d < 10 ? "0" + d : d;
            this.getorderdate = y + "-" + m + "-" + d + " ";
          }
          for (var i = 0; i < 1; i++) {
            var dd = new Date(parseInt(data3.deliverydate.substr(6, 13)));
            var y = dd.getFullYear();
            var m = dd.getMonth() + 1;
            m = m < 10 ? "0" + m : m;
            var d = dd.getDate();
            d = d < 10 ? "0" + d : d;
            this.deliverydate = y + "-" + m + "-" + d + " ";
          }
          this.writer = data3.writer;
          this.ordtype = data3.ordtype;
          var val = [];
          data3.lstpro.forEach(item => {
            val.push(item);
          });
          this.tableData = val;
          for (var i = 0; i < this.tableData.length; i++) {
            var dd = new Date(parseInt(this.tableData[i].deliverydate.substr(6, 13)));
            var y = dd.getFullYear();
            var m = dd.getMonth() + 1;
            m = m < 10 ? "0" + m : m;
            var d = dd.getDate();
            d = d < 10 ? "0" + d : d;
            this.tableData[i].deliverydate= y + "-" + m + "-" + d + " ";
          }
          this.hetongmoney=data3.hetongmoney
          this.paystyle=data3.paystyle
          this.payforstyle=data3.payforstyle
          this.makeman=data3.makeman
        }
      );
    },
    //返回
    revert() {
      this.$router.go(-1);
    },

    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    handleRemove2(file) {
      console.log(file);
    },
    handlePictureCardPreview2(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload2(file) {
      console.log(file);
    },
    handleRemove3(file) {
      console.log(file);
    },
    handlePictureCardPreview3(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload3(file) {
      console.log(file);
    },
    logo(file, fileList) {
      if (fileList.length == 1) {
        this.hideUpload = true;
      }
    },
    logoout(file, fileList) {
      if (fileList.length == 1) {
        this.hideUpload = true;
      }
    },
    logo2(file, fileList) {
      if (fileList.length == 1) {
        this.hideUpload2 = true;
      }
    },
    logoout2(file, fileList) {
      if (fileList.length == 1) {
        this.hideUpload2 = true;
      }
    },
    logo3(file, fileList) {
      if (fileList.length == 1) {
        this.hideUpload3 = true;
      }
    },
    logoout3(file, fileList) {
      if (fileList.length == 1) {
        this.hideUpload3 = true;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.nav {
  height: 60px;
  padding: 0 1%;
  position: relative;
  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;
    span {
      background: $Header_color;
      color: $Header_color;
    }
  }
  #nav_go5 {
    position: absolute;
    top: 10px;
    right: 1%;
    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}
.step {
  width: 50%;
  position: absolute;
  top: 0;
  left: 25%;
}
.conter_box1 {
  background: $white;
  height: 150px;
  width: 98%;
  padding: 5px 1% 0 1%;

  p {
    height: 40px;
    em {
      display: inline-block;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 50% 50%;
      border: solid 1px #ccc;
    }
  }
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    color: #909399;
    li {
      width: 33%;
      font-size: 14px;
      margin-bottom: 10px;
      text-align: center;
    }
  }
}
.conter_box2 {
  background: $white;
  height: 100px;
  width: 98%;
  margin-top: 10px;
  padding: 5px 1% 0 1%;
  p {
    height: 40px;
    em {
      display: inline-block;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 50% 50%;
      border: solid 1px #ccc;
    }
  }
  ul {
    width: 100%;
    display: flex;
    color: #909399;
    li {
      width: 20%;
      font-size: 14px;
      margin-bottom: 10px;
    }
  }
}
.conter_box3 {
  background: $white;
  height: 160px;
  width: 98%;
  margin-top: 10px;
  padding: 5px 1% 0 1%;
  p {
    height: 40px;
    em {
      display: inline-block;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 50% 50%;
      border: solid 1px #ccc;
    }
  }
}
.conter_box4 {
  background: $white;
  height: 90px;
  width: 98%;
  margin-top: 10px;
  padding: 5px 1% 0 1%;
  p {
    height: 40px;
    em {
      display: inline-block;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 50% 50%;
      border: solid 1px #ccc;
    }
  }
  ul {
    width: 100%;
    display: flex;
    color: #909399;
    li {
      width: 33%;
      font-size: 14px;
      text-align: center;
      margin-bottom: 10px;
    }
  }
}
#conter_box5 {
  background: $white;
  height: 200px;
  width: 98%;
  margin-top: 10px;
  padding: 5px 1% 0 1%;

  p {
    height: 40px;
    em {
      display: inline-block;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 50% 50%;
      border: solid 1px #ccc;
    }
  }
  ul {
    width: 100%;
    // display: flex;
    height: 130px;
    color: #909399;
    overflow: hidden;
    li {
      width: 33%;
      float: left;
      //font-size: 14px;
      height: 130px;
      margin-bottom: 10px;
      text-align: center;
      //   border: solid 1px red;
    }
  }
}
.dispose_box1 {
  border: solid 1px #ccc;
}
.dispose_box2,
.dispose_box3 {
  border: solid 1px #ccc;
  margin-top: 10px;
}
.bottom {
  text-align: center;
  padding-top: 30px;
  padding-bottom: 10px;
  // background: $white;
  //position: relative;
  p {
    width: 20%;
    // height: 50px;
    line-height: 40px;
    // position: absolute;
    // top: 30px;
    // left: 1%;
    // display: flex;
    //justify-content: space-between;
  }
}
</style>
<style>
.el-step__title {
  font-size: 14px;
}
.el-input__inner {
  font-size: 12px;
}
#conter_box5 .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
#conter_box5 .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
#conter_box5 .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height:80px;
  line-height: 80px;
  text-align: center;
}
#conter_box5 .avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style>